<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        <el-button class="icon-button back-button" style="margin-right: 10px;" @click="$router.back()">
          <i class="el-icon-arrow-left" style="font-size: 12px"></i>
        </el-button>
        <span style="display:flex">
          <link-button :isName="true" :content="$t('route.userDesktopUser')" @click="$router.push({ name: 'UserDesktopUser' })" />
          / {{systemManager.name}}
        </span>
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card class="content-info" v-loading="loading">
          <el-form :inline="true" class="" style="margin-bottom: 10px;" label-width="100px" label-position="left">
            <el-form-item :label="$t('user.MobliePhone')">
              <span class="content-info-value">
                {{ systemManager.mobile }}
              </span>
            </el-form-item>
            <el-form-item :label="$t('user.Telephone')">
              <span class="content-info-value">
                {{ systemManager.telphone }}
              </span>
            </el-form-item>
            <el-form-item :label="$t('user.Email')">
              <span class="content-info-value">
                {{ systemManager.email }}
              </span>
            </el-form-item>
          </el-form>
          <el-form :inline="true" class="" style="margin-bottom: 10px;" :label-width="language === 'zh' ? '100px' : '160px'" label-position="left">
            <el-form-item :label="$t('user.failure')">
              <span class="content-info-value">
                {{ systemManager.auth_failed_times }}
              </span>
            </el-form-item>
            <el-form-item :label="$t('user.loginFailureTime')">
              <span class="content-info-value">
                {{ transformTimestamp(systemManager.auth_failed_at) }}
              </span>
            </el-form-item>
            <el-form-item :label="$t('user.allowTime')">
              <span class="content-info-value">
                {{ timeToString(systemManager.auth_time_window) }}
              </span>
            </el-form-item>
          </el-form>
          <el-form :inline="true" class="" label-width="100px" label-position="left">
            <el-form-item :label="$t('common.description')">
              {{ systemManager.description }}
            </el-form-item>
          </el-form>
        </el-card>
        <el-card v-if="false">
          <el-tabs v-model="currentDetail" @tab-click="changeDetail">
            <el-tab-pane label="操作日志" name="AdminLog"></el-tab-pane>
          </el-tabs>
          <basic-table
            ref="BasicTable"
            :pageMethod="(params) => {
              params.user_id = systemManager.id;
              params.username = adminLogSearchValue;
            }"
          >
            <template>
              <div class="table-left-options">
              </div>
              <div class="table-right-options">
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column type="selection" width="40" align="center"></el-table-column>
              <el-table-column
                prop="time"
                label="操作时间"
              >
                <template #default="props">
                  <span>{{ parseTime(props.row.time / 1000000) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="object_type"
                label="对象类型"
              >
                <template #default="props">
                  <span>{{ $t("objectType." + props.row.object_type) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="object_name"
                label="对象名称"
              >
              </el-table-column>
              <el-table-column
                prop="action"
                label="操作类型"
              >
              </el-table-column>
              <el-table-column
                prop="result"
                label="操作结果"
              >
                <template #default="props">
                  <span>{{ $t("actionResult." + props.row.result) }}</span>
                </template>
              </el-table-column>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../components/Basic/Table/BasicTable.vue';
import LinkButton from '../../components/Basic/Button/LinkButton.vue';
import { parseTime, loginTimeslotToString, transformTimestamp } from '../../utils';
import { AppModule } from '../../store/modules/app';
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton
  },
  computed: {
    parseTime: () => parseTime,
    transformTimestamp: () => transformTimestamp,
    // loginTimeslotToString: () => loginTimeslotToString
  },
  data() {
    return {
      loading: false,
      systemManager: {},
      currentDetail: "AdminLog",
      adminLogSearchValue: "",
      language: AppModule.language,
    }
  },
  mounted() {
    if ((this as any).$route.params.systemManager && (this as any).$route.params.systemManager.id !== undefined) {
      (this as any).systemManager = (this as any).$route.params.systemManager;
    } else if ((this as any).$route.params.systemManagerId !== undefined) {
      (this as any).systemManager.id = (this as any).$route.params.systemManagerId
      this.loading = true;
      (this as any).$tunnyApi.apiGetSystemManagerInfo((this as any).$route.params.systemManagerId).then((res: any) => {
        this.loading = false;
        (this as any).systemManager = res;
      });
    } else if ((this as any).$route.query && (this as any).$route.query.id) {
      (this as any).systemManager.id = (this as any).$route.query.id
      this.loading = true;
      (this as any).$tunnyApi.apiGetSystemManagerInfo((this as any).$route.query.id).then((res: any) => {
        this.loading = false;
        (this as any).systemManager = res;
      });
    } else {
      (this as any).$router.back();
    }
  },
  methods: {
    timeToString(data: string) {
      if (data != null) {
          return loginTimeslotToString(JSON.parse(decodeURIComponent(data)));
      }
      
    },
    changeDetail(tab: any) {
      (this as any).currentDetail = tab.name;
      (this as any).$nextTick(() => {
        (this as any).$refs.BasicTable.refresh();
      });
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;
      display: flex;
      align-items: center;

      .back-button {
        width: 24px;
        height: 24px;
        padding: 0px 6px;
      }

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;

      .content-info {
        margin-bottom: 20px;

        .content-info-value {
          width: 200px;
          display: block;
        }

        ::v-deep .el-form-item {
          margin-bottom: 0px;
          margin-right: 40px
        }

        ::v-deep .el-form-item__label, ::v-deep .el-form-item__content {
          color: #999999;
          font-size: 12px;
        }

        ::v-deep .el-form-item__content {
          color: #333333;
        }
      }
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
